<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>真心社聊天室 - 分享你的内心世界</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366F1', // 主色调：紫色
                        secondary: '#EC4899', // 辅助色：粉色
                        accent: '#06B6D4', // 强调色：青色
                        dark: '#1F2937', // 深色
                        light: '#F9FAFB', // 浅色
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .bg-gradient-custom {
                background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark antialiased">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="#" class="flex items-center">
                        <span class="text-primary text-2xl font-bold">真心社</span>
                        <span class="ml-1 text-secondary text-xl font-bold">聊天室</span>
                    </a>
                </div>
                
                <!-- 桌面端导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#home" class="text-gray-700 hover:text-primary font-medium transition-colors">首页</a>
                    <a href="#diaries" class="text-gray-700 hover:text-primary font-medium transition-colors">日记广场</a>
                    <a href="#features" class="text-gray-700 hover:text-primary font-medium transition-colors">特色功能</a>
                    <a href="#community" class="text-gray-700 hover:text-primary font-medium transition-colors">社区互动</a>
                </nav>
                
                <div class="flex items-center space-x-4">
                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                        <i class="fa fa-moon-o text-gray-600"></i>
                    </button>
                    <button id="search-btn" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                        <i class="fa fa-search text-gray-600"></i>
                    </button>
                    <button id="login-btn" class="hidden sm:block px-4 py-2 rounded-full bg-primary text-white hover:bg-primary/90 transition-colors">
                        登录 / 注册
                    </button>
                    <button id="admin-btn" class="hidden px-4 py-2 rounded-full bg-accent text-white hover:bg-accent/90 transition-colors">
                        <i class="fa fa-cog mr-1"></i> 管理后台
                    </button>
                    <button id="mobile-menu-btn" class="md:hidden p-2 rounded-md hover:bg-gray-100 transition-colors">
                        <i class="fa fa-bars text-gray-600"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg rounded-b-lg mx-4 mt-2 overflow-hidden">
            <div class="px-2 pt-2 pb-3 space-y-1">
                <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">首页</a>
                <a href="#diaries" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">日记广场</a>
                <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">特色功能</a>
                <a href="#community" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">社区互动</a>
                <a href="#" id="mobile-admin-link" class="hidden block px-3 py-2 rounded-md text-base font-medium bg-accent text-white hover:bg-accent/90">
                    <i class="fa fa-cog mr-1"></i> 管理后台
                </a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium bg-primary text-white hover:bg-primary/90">登录 / 注册</a>
            </div>
        </div>
    </header>

    <!-- 搜索框 -->
    <div id="search-container" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
        <div class="bg-white rounded-xl p-6 w-full max-w-2xl mx-4 transform transition-all duration-300 scale-95 opacity-0" id="search-box">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-gray-800">搜索日记</h3>
                <button id="close-search" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <div class="relative">
                <input type="text" placeholder="输入关键词搜索..." class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                <button class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                    <i class="fa fa-search mr-1"></i> 搜索
                </button>
            </div>
            <div class="mt-6">
                <h4 class="text-sm font-medium text-gray-500 mb-3">热门搜索</h4>
                <div class="flex flex-wrap gap-2">
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm cursor-pointer hover:bg-gray-200 transition-colors">成长日记</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm cursor-pointer hover:bg-gray-200 transition-colors">情感分享</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm cursor-pointer hover:bg-gray-200 transition-colors">旅行见闻</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm cursor-pointer hover:bg-gray-200 transition-colors">学习笔记</span>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm cursor-pointer hover:bg-gray-200 transition-colors">生活感悟</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 英雄区域 -->
    <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/5 to-secondary/5">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-4">
                        分享<span class="text-primary">生活</span>，记录<span class="text-secondary">成长</span>，连接<span class="text-accent">心灵</span>
                    </h1>
                    <p class="text-gray-600 text-lg md:text-xl mb-8 max-w-lg">
                        真心社聊天室是一个安全、私密的社区，在这里你可以自由表达内心的想法，结交志同道合的朋友，共同成长。
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <button class="px-6 py-3 bg-primary text-white rounded-full font-medium hover:bg-primary/90 transition-all shadow-lg hover:shadow-xl hover:shadow-primary/20 transform hover:-translate-y-1">
                            <i class="fa fa-pencil-square-o mr-2"></i>开始写日记
                        </button>
                        <button class="px-6 py-3 bg-white text-primary border border-primary rounded-full font-medium hover:bg-gray-50 transition-all">
                            <i class="fa fa-comments-o mr-2"></i>浏览社区
                        </button>
                    </div>
                    <div class="mt-8 flex items-center space-x-4">
                        <div class="flex -space-x-2">
                            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <div class="w-10 h-10 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center text-xs font-medium text-gray-600">+2k</div>
                        </div>
                        <p class="text-sm text-gray-600">已有超过 10 位用户加入我们</p>
                    </div>
                </div>
                <div class="md:w-1/2 relative">
                    <div class="relative z-10 bg-white rounded-2xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
                        <div class="bg-gradient-custom p-4 text-white">
                            <div class="flex justify-between items-center">
                                <h3 class="font-bold">今日心情</h3>
                                <span class="text-sm bg-white/20 px-2 py-1 rounded-full">星期三, 5月31日</span>
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="mb-4">
                                <textarea placeholder="今天过得怎么样？记录下你的感受..." class="w-full border border-gray-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none h-32"></textarea>
                            </div>
                            <div class="flex justify-between items-center">
                                <div class="flex space-x-2">
                                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-smile-o text-yellow-400"></i>
                                    </button>
                                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-meh-o text-gray-400"></i>
                                    </button>
                                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-frown-o text-blue-400"></i>
                                    </button>
                                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-tired text-red-400"></i>
                                    </button>
                                </div>
                                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-paper-plane-o mr-1"></i>发布
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="absolute -top-6 -right-6 w-24 h-24 bg-secondary/20 rounded-full blur-xl"></div>
                    <div class="absolute -bottom-8 -left-8 w-32 h-32 bg-primary/20 rounded-full blur-xl"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 统计数据 -->
    <section class="py-12 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="bg-gray-50 rounded-xl p-6 text-center transform transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2">0</div>
                    <div class="text-gray-600">日记总数</div>
                </div>
                <div class="bg-gray-50 rounded-xl p-6 text-center transform transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <div class="text-3xl md:text-4xl font-bold text-secondary mb-2">10</div>
                    <div class="text-gray-600">活跃用户</div>
                </div>
                <div class="bg-gray-50 rounded-xl p-6 text-center transform transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <div class="text-3xl md:text-4xl font-bold text-accent mb-2"></div>
                    <div class="text-gray-600">评论互动</div>
                </div>
                <div class="bg-gray-50 rounded-xl p-6 text-center transform transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <div class="text-3xl md:text-4xl font-bold text-dark mb-2">0</div>
                    <div class="text-gray-600">兴趣话题</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 日记广场 -->
    <section id="diaries" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">探索精彩日记</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">发现来自他人的真实故事和情感分享，找到共鸣，结交朋友</p>
            </div>

            <div class="flex justify-center mb-8">
                <div class="inline-flex bg-white p-1 rounded-full shadow-sm">
                    <button class="px-4 py-2 rounded-full bg-primary text-white">最新发布</button>
                    <button class="px-4 py-2 rounded-full text-gray-600 hover:bg-gray-100">热门推荐</button>
                    <button class="px-4 py-2 rounded-full text-gray-600 hover:bg-gray-100">关注动态</button>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 日记卡片 1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                    <div class="relative">
                        <img src="https://picsum.photos/800/400?random=10" alt="海边风景" class="w-full h-48 object-cover">
                        <div class="absolute top-4 left-4 bg-primary/90 text-white text-xs font-medium px-2 py-1 rounded">旅行</div>
                        <div class="absolute top-4 right-4 opacity-0 hover:opacity-100 transition-opacity">
                            <button class="admin-action-btn p-2 bg-white/80 rounded-full shadow-md text-gray-600 hover:text-red-500" data-action="delete" data-id="1">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <img src="https://picsum.photos/200/200?random=11" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                            <div>
                                <h4 class="font-medium">旅行者小明</h4>
                                <p class="text-xs text-gray-500">2小时前</p>
                            </div>
                        </div>
                        <h3 class="font-bold text-lg mb-2 line-clamp-1">海边日落，绝美瞬间</h3>
                        <p class="text-gray-600 mb-4 line-clamp-2">今天在海边看到了绝美的日落，那一抹橙红色的晚霞，让我忘记了所有烦恼...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-4">
                                <button class="text-gray-500 hover:text-primary transition-colors">
                                    <i class="fa fa-heart-o mr-1"></i> 128
                                </button>
                                <button class="text-gray-500 hover:text-primary transition-colors">
                                    <i class="fa fa-comment-o mr-1"></i> 32
                                </button>
                            </div>
                            <button class="text-primary hover:text-primary/80 font-medium transition-colors">
                                阅读更多 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 日记卡片 2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 hover:scale-102">
                    <div class="relative">
                        <img src="https://picsum.photos/800/400?random=12" alt="咖啡馆" class="w-full h-48 object-cover">
                        <div class="absolute top-4 left-4 bg-secondary/90 text-white text-xs font-medium px-2 py-1 rounded">生活</div>
                        <div class="absolute top-4 right-4 opacity-0 hover:opacity-100 transition-opacity">
                            <button class="admin-action-btn p-2 bg-white/80 rounded-full shadow-md text-gray-600 hover:text-red-500" data-action="delete" data-id="2">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <img src="https://picsum.photos/200/200?random=13" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                            <div>
                                <h4 class="font-medium">咖啡爱好者</h4>
                                <p class="text-xs text-gray-500">昨天</p>
                            </div>
                        </div>
                        <h3 class="font-bold text-lg mb-2 line-clamp-1">午后咖啡馆的宁静时光</h3>
                        <p class="text-gray-600 mb-4 line-clamp-2">坐在窗边，喝着拿铁，看着人来人往，享受这份宁静与自由。生活中的小确幸...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-4">
                                <button class="text-gray-500 hover:text-primary transition-colors">
                                    <i class="fa fa-heart-o mr-1"></i> 87
                                </button>
                                <button class="text-gray-500 hover:text-primary transition-colors">
                                    <i class="fa fa-comment-o mr-1"></i> 19
                                </button>
                            </div>
                            <button class="text-primary hover:text-primary/80 font-medium transition-colors">
                                阅读更多 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 日记卡片 3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                    <div class="relative">
                        <img src="https://picsum.photos/800/400?random=14" alt="学习场景" class="w-full h-48 object-cover">
                        <div class="absolute top-4 left-4 bg-accent/90 text-white text-xs font-medium px-2 py-1 rounded">学习</div>
                        <div class="absolute top-4 right-4 opacity-0 hover:opacity-100 transition-opacity">
                            <button class="admin-action-btn p-2 bg-white/80 rounded-full shadow-md text-gray-600 hover:text-red-500" data-action="delete" data-id="3">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <img src="https://picsum.photos/200/200?random=15" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                            <div>
                                <h4 class="font-medium">编程学习者</h4>
                                <p class="text-xs text-gray-500">3天前</p>
                            </div>
                        </div>
                        <h3 class="font-bold text-lg mb-2 line-clamp-1">学习编程的第100天</h3>
                        <p class="text-gray-600 mb-4 line-clamp-2">从零基础开始，到现在能够独立完成一个小项目，这100天的坚持终于有了回报...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-4">
                                <button class="text-gray-500 hover:text-primary transition-colors">
                                    <i class="fa fa-heart-o mr-1"></i> 203
                                </button>
                                <button class="text-gray-500 hover:text-primary transition-colors">
                                    <i class="fa fa-comment-o mr-1"></i> 45
                                </button>
                            </div>
                            <button class="text-primary hover:text-primary/80 font-medium transition-colors">
                                阅读更多 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center mt-12">
                <button class="px-6 py-3 border border-primary text-primary rounded-full font-medium hover:bg-primary hover:text-white transition-all">
                    查看更多日记 <i class="fa fa-angle-double-right ml-1"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- 特色功能 -->
    <section id="features" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">个性化功能</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">我们提供丰富多样的功能，帮助你更好地记录生活，分享情感，连接心灵</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能卡片 1 -->
                <div class="bg-gray-50 rounded-xl p-8 transform transition-all duration-300 hover:shadow-lg hover:-translate-y-2">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-lock text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">私密保护</h3>
                    <p class="text-gray-600 mb-4">你的日记可以设置为私密状态，只有你能看到，完全保护个人隐私。</p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">多级隐私设置</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">密码加密保护</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">匿名发布选项</span>
                        </li>
                    </ul>
                    <button class="text-primary font-medium hover:text-primary/80 transition-colors">
                        了解更多 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>

                <!-- 功能卡片 2 -->
                <div class="bg-gray-50 rounded-xl p-8 transform transition-all duration-300 hover:shadow-lg hover:-translate-y-2">
                    <div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-magic text-2xl text-secondary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能心情分析</h3>
                    <p class="text-gray-600 mb-4">我们的AI会分析你的日记内容，生成心情报告，帮助你更好地了解自己。</p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">情绪波动趋势图</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">关键词提取分析</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">个性化建议生成</span>
                        </li>
                    </ul>
                    <button class="text-primary font-medium hover:text-primary/80 transition-colors">
                        了解更多 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>

                <!-- 功能卡片 3 -->
                <div class="bg-gray-50 rounded-xl p-8 transform transition-all duration-300 hover:shadow-lg hover:-translate-y-2">
                    <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-comments-o text-2xl text-accent"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">社区互动</h3>
                    <p class="text-gray-600 mb-4">与志同道合的朋友互动，分享经验，互相鼓励，建立有意义的连接。</p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">评论、点赞、分享功能</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">话题讨论区</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">关注感兴趣的用户</span>
                        </li>
                    </ul>
                    <button class="text-primary font-medium hover:text-primary/80 transition-colors">
                        了解更多 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>

                <!-- 功能卡片 4 -->
                <div class="bg-gray-50 rounded-xl p-8 transform transition-all duration-300 hover:shadow-lg hover:-translate-y-2">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-calendar-check-o text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">回忆提醒</h3>
                    <p class="text-gray-600 mb-4">系统会自动提醒你去年的今天写了什么，重温美好回忆，记录成长轨迹。</p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">周年回忆推送</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">重要事件提醒</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">成长轨迹可视化</span>
                        </li>
                    </ul>
                    <button class="text-primary font-medium hover:text-primary/80 transition-colors">
                        了解更多 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>

                <!-- 功能卡片 5 -->
                <div class="bg-gray-50 rounded-xl p-8 transform transition-all duration-300 hover:shadow-lg hover:-translate-y-2">
                    <div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-picture-o text-2xl text-secondary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多媒体日记</h3>
                    <p class="text-gray-600 mb-4">除了文字，你还可以添加图片、视频和音频，丰富你的日记内容。</p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">图片上传与编辑</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">视频嵌入支持</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">语音日记功能</span>
                        </li>
                    </ul>
                    <button class="text-primary font-medium hover:text-primary/80 transition-colors">
                        了解更多 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>

                <!-- 功能卡片 6 -->
                <div class="bg-gray-50 rounded-xl p-8 transform transition-all duration-300 hover:shadow-lg hover:-translate-y-2">
                    <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-trophy text-2xl text-accent"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">成就系统</h3>
                    <p class="text-gray-600 mb-4">持续记录可以获得成就徽章，激励自己坚持写日记，培养良好习惯。</p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">连续打卡奖励</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">内容质量徽章</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span class="text-gray-600">社区贡献勋章</span>
                        </li>
                    </ul>
                    <button class="text-primary font-medium hover:text-primary/80 transition-colors">
                        了解更多 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 社区互动 -->
    <section id="community" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">社区互动</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">我们的真心社，与志同道合的朋友交流互动，分享生活的喜怒哀乐</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- 热门话题 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-gradient-custom p-6 text-white">
                        <h3 class="text-xl font-bold">热门话题</h3>
                        <p class="text-white/80 mt-1">参与讨论，分享你的观点</p>
                    </div>
                    <div class="p-6">
                        <div class="space-y-4">
                            <div class="flex items-start p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa fa-heart"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="font-medium text-gray-800">如何保持积极心态面对生活压力？</h4>
                                    <p class="text-sm text-gray-600 mt-1">最近大家都在讨论如何应对生活中的各种压力，分享一下你的经验吧！</p>
                                    <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
                                        <span class="mr-3"><i class="fa fa-comment-o mr-1"></i> 128 回复</span>
                                        <span><i class="fa fa-user-o mr-1"></i> 56 人参与</span>
                                        <button class="admin-action-btn text-gray-500 hover:text-red-500" data-action="delete-topic" data-id="1">
                                            <i class="fa fa-trash-o"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="flex items-start p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                                    <i class="fa fa-book"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="font-medium text-gray-800">分享一本你最近读过的好书</h4>
                                    <p class="text-sm text-gray-600 mt-1">书籍是人类进步的阶梯，你最近读过哪些让你受益匪浅的书呢？</p>
                                    <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
                                        <span class="mr-3"><i class="fa fa-comment-o mr-1"></i> 94 回复</span>
                                        <span><i class="fa fa-user-o mr-1"></i> 42 人参与</span>
                                        <button class="admin-action-btn text-gray-500 hover:text-red-500" data-action="delete-topic" data-id="2">
                                            <i class="fa fa-trash-o"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="flex items-start p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center text-accent">
                                    <i class="fa fa-plane"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="font-medium text-gray-800">你最想去的旅行目的地是哪里？</h4>
                                    <p class="text-sm text-gray-600 mt-1">疫情过后，你最想去哪里旅行？分享一下你的梦想目的地吧！</p>
                                    <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
                                        <span class="mr-3"><i class="fa fa-comment-o mr-1"></i> 156 回复</span>
                                        <span><i class="fa fa-user-o mr-1"></i> 78 人参与</span>
                                        <button class="admin-action-btn text-gray-500 hover:text-red-500" data-action="delete-topic" data-id="3">
                                            <i class="fa fa-trash-o"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-6 text-center">
                            <button class="px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                                查看更多话题 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 精选评论 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-gradient-to-r from-primary to-accent p-6 text-white">
                        <h3 class="text-xl font-bold">精选评论</h3>
                        <p class="text-white/80 mt-1">温暖的话语，真诚的鼓励</p>
                    </div>
                    <div class="p-6">
                        <div class="space-y-6">
                            <div class="flex">
                                <img src="https://picsum.photos/200/200?random=20" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
                                <div class="flex-1">
                                    <div class="bg-gray-50 p-4 rounded-lg relative">
                                        <div class="absolute top-2 right-2 opacity-0 hover:opacity-100 transition-opacity">
                                            <button class="admin-action-btn p-1 bg-white/80 rounded-full text-gray-500 hover:text-red-500" data-action="delete-comment" data-id="1">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                        </div>
                                        <div class="flex justify-between items-start mb-2">
                                            <h4 class="font-medium text-gray-800">心灵守护者</h4>
                                            <span class="text-xs text-gray-500">2天前</span>
                                        </div>
                                        <p class="text-gray-600">你的文字真的很有感染力，每一篇日记都能让我感受到你的真诚和热情。继续保持，你一定会越来越好的！</p>
                                    </div>
                                    <div class="mt-2 flex justify-between items-center text-sm">
                                        <span class="text-gray-500">回复至：《生活中的小确幸》</span>
                                        <div class="flex items-center">
                                            <button class="text-gray-500 hover:text-primary transition-colors">
                                                <i class="fa fa-heart-o mr-1"></i> 32
                                            </button>
                                            <button class="text-gray-500 hover:text-primary transition-colors ml-4">
                                                <i class="fa fa-reply-o mr-1"></i> 回复
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="flex">
                                <img src="https://picsum.photos/200/200?random=21" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
                                <div class="flex-1">
                                    <div class="bg-gray-50 p-4 rounded-lg relative">
                                        <div class="absolute top-2 right-2 opacity-0 hover:opacity-100 transition-opacity">
                                            <button class="admin-action-btn p-1 bg-white/80 rounded-full text-gray-500 hover:text-red-500" data-action="delete-comment" data-id="2">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                        </div>
                                        <div class="flex justify-between items-start mb-2">
                                            <h4 class="font-medium text-gray-800">梦想追寻者</h4>
                                            <span class="text-xs text-gray-500">3天前</span>
                                        </div>
                                        <p class="text-gray-600">我也有过类似的经历，真的很能体会你的感受。坚持下去，你并不孤单，我们一起努力！</p>
                                    </div>
                                    <div class="mt-2 flex justify-between items-center text-sm">
                                        <span class="text-gray-500">回复至：《成长的烦恼与困惑》</span>
                                        <div class="flex items-center">
                                            <button class="text-gray-500 hover:text-primary transition-colors">
                                                <i class="fa fa-heart-o mr-1"></i> 28
                                            </button>
                                            <button class="text-gray-500 hover:text-primary transition-colors ml-4">
                                                <i class="fa fa-reply-o mr-1"></i> 回复
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="flex">
                                <img src="https://picsum.photos/200/200?random=22" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
                                <div class="flex-1">
                                    <div class="bg-gray-50 p-4 rounded-lg relative">
                                        <div class="absolute top-2 right-2 opacity-0 hover:opacity-100 transition-opacity">
                                            <button class="admin-action-btn p-1 bg-white/80 rounded-full text-gray-500 hover:text-red-500" data-action="delete-comment" data-id="3">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                        </div>
                                        <div class="flex justify-between items-start mb-2">
                                            <h4 class="font-medium text-gray-800">阳光女孩</h4>
                                            <span class="text-xs text-gray-500">5天前</span>
                                        </div>
                                        <p class="text-gray-600">你的旅行日记太美了！照片拍得很有感觉，文字也很生动。我也想去这个地方看看，能分享一下攻略吗？</p>
                                    </div>
                                    <div class="mt-2 flex justify-between items-center text-sm">
                                        <span class="text-gray-500">回复至：《云南之旅：邂逅最美的风景》</span>
                                        <div class="flex items-center">
                                            <button class="text-gray-500 hover:text-primary transition-colors">
                                                <i class="fa fa-heart-o mr-1"></i> 45
                                            </button>
                                            <button class="text-gray-500 hover:text-primary transition-colors ml-4">
                                                <i class="fa fa-reply-o mr-1"></i> 回复
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-6 text-center">
                            <button class="px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                                查看更多评论 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 管理后台模态框 -->
    <div id="admin-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
        <div class="bg-white rounded-xl p-6 w-full max-w-4xl mx-4 transform transition-all duration-300 scale-95 opacity-0" id="admin-box">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-gray-800">真心社管理后台</h3>
                <button id="close-admin" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>

            <div class="flex flex-col md:flex-row gap-6">
                <!-- 侧边栏 -->
                <div class="md:w-1/4">
                    <div class="bg-gray-50 rounded-lg p-4">
                        <ul class="space-y-2">
                            <li>
                                <button class="admin-nav-btn w-full text-left px-4 py-2 rounded-lg bg-primary text-white" data-section="dashboard">
                                    <i class="fa fa-dashboard mr-2"></i> 数据概览
                                </button>
                            </li>
                            <li>
                                <button class="admin-nav-btn w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-200" data-section="users">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </button>
                            </li>
                            <li>
                                <button class="admin-nav-btn w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-200" data-section="diaries">
                                    <i class="fa fa-book mr-2"></i> 日记管理
                                </button>
                            </li>
                            <li>
                                <button class="admin-nav-btn w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-200" data-section="comments">
                                    <i class="fa fa-comments mr-2"></i> 评论管理
                                </button>
                            </li>
                            <li>
                                <button class="admin-nav-btn w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-200" data-section="topics">
                                    <i class="fa fa-tags mr-2"></i> 话题管理
                                </button>
                            </li>
                            <li>
                                <button class="admin-nav-btn w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-200" data-section="reports">
                                    <i class="fa fa-flag mr-2"></i> 举报处理
                                </button>
                            </li>
                            <li>
                                <button class="admin-nav-btn w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-200" data-section="settings">
                                    <i class="fa fa-cog mr-1"></i> 管理后台
                                </button>
                            </li>
                            <li>
                                <button class="admin-nav-btn w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-200" data-section="settings">
                                    <i class="fa fa-cog mr-1"></i> 管理后台
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 登录模态框 -->
    <div id="login-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" style="background: url('your-background-image-url.jpg') no-repeat center center fixed; background-size: cover;">
        <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4">
            <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4">
                <div class="text-center mb-6">
                    <h3 class="text-xl font-bold text-dark">登录</h3>
                </div>
                <form id="login-form" class="space-y-4">
                    <input type="text" id="username" placeholder="用户名" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    <input type="password" id="password" placeholder="密码" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    <button type="submit" class="w-full px-4 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">立即登录</button>
                </form>
                <p class="text-center text-gray-500 mt-4">还没有账号？<a href="#" id="goto-register" class="text-primary">立即注册</a></p>
                <button id="close-login" class="w-full px-4 py-3 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors mt-2">关闭</button>
            </div>
        </div>
    </div>
    <!-- 其他 HTML 内容 -->
<!-- 在合适的位置添加用户资料展示区域 -->
<div class="user-profile mt-8 p-6 bg-white rounded-xl shadow-md">
    <div class="flex items-center mb-4">
        <img src="user-avatar.jpg" alt="用户头像" class="w-20 h-20 rounded-full">
        <div class="ml-4">
            <h3 class="font-bold text-xl">用户名</h3>
            <p class="text-gray-600">用户简介</p>
        </div>
    </div>
    <div class="user-preferences">
        <h4 class="font-bold text-lg mb-2">用户偏好设置</h4>
        <form>
            <div class="mb-4">
                <label for="theme" class="block text-gray-700 text-sm font-bold mb-2">主题选择</label>
                <select id="theme" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                    <option value="light">浅色主题</option>
                    <option value="dark">深色主题</option>
                </select>
            </div>
            <button type="submit" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary/80">保存设置</button>
        </form>
    </div>
</div>
    <script>
        // 你的 JavaScript 代码
    </script>

<!-- 新增：将JS代码移至body末尾 -->
<script>
    // 1. 移动端菜单展开/收起
    document.querySelector('#mobile-menu-btn').addEventListener('click', () => {
        const mobileMenu = document.querySelector('#mobile-menu');
        mobileMenu.classList.toggle('hidden'); // 切换隐藏状态
    });

    // 2. 搜索框显示/关闭
    document.querySelector('#search-btn').addEventListener('click', () => {
        document.querySelector('#search-container').classList.remove('hidden');
        document.querySelector('#search-box').classList.add('scale-100', 'opacity-100'); // 触发淡入动画
    });
</script>

    // 4. 主题切换（深色/浅色模式）
    <script>
        // 主题切换（依赖Tailwind的dark模式）
        const themeToggle = document.querySelector('#theme-toggle');
        const moonIcon = themeToggle.querySelector('.fa-moon-o'); // 初始月亮图标
        const sunIcon = document.createElement('i'); // 创建太阳图标
        sunIcon.className = 'fa fa-sun-o text-gray-600'; // Font Awesome太阳图标类名
    
        themeToggle.addEventListener('click', function() {
            document.documentElement.classList.toggle('dark'); // 切换dark类（Tailwind内置支持）

            // 切换图标显示
            if (document.documentElement.classList.contains('dark')) {
                // 这里可以添加图标切换逻辑
            }
        });
    </script>
</body>
</html>
<script>
    async function registerUser() {
        const username = prompt('请输入用户名');
        const password = prompt('请输入密码');
        if (username && password) {
            try {
                const response = await fetch('http://127.0.0.1:5000/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });
                const data = await response.json();
                alert(data.msg);
            } catch (error) {
                console.error('注册失败:', error);
            }
        }
    }

    async function loginUser() {
        const username = prompt('请输入用户名');
        const password = prompt('请输入密码');
        if (username && password) {
            try {
                const response = await fetch('http://127.0.0.1:5000/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });
                const data = await response.json();
                if (data.access_token) {
                    localStorage.setItem('token', data.access_token);
                    alert('登录成功');
                } else {
                    alert(data.msg);
                }
            } catch (error) {
                console.error('登录失败:', error);
            }
        }
    }

    // 为登录/注册按钮绑定事件
    const loginBtn = document.getElementById('login-btn');
    if (loginBtn) {
        loginBtn.addEventListener('click', function() {
            const action = confirm('您要注册还是登录？点击确定注册，取消登录');
            if (action) {
                registerUser();
            } else {
                loginUser();
            }
        });
    }
    </script>
<script>
    async function fetchDiaries() {
        try {
            const response = await fetch('http://127.0.0.1:5000/api/diaries');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const diaries = await response.json();
            console.log(diaries);
            // 可以添加代码将日记信息显示在页面上
        } catch (error) {
            console.error('Error fetching diaries:', error);
        }
    }

    // 页面加载完成后调用函数
    window.addEventListener('load', fetchDiaries);
</script>
<script>
    // 获取所有删除按钮
    const deleteButtons = document.querySelectorAll('.admin-action-btn[data-action="delete"]');

    // 为每个删除按钮添加点击事件监听器
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const diaryId = this.dataset.id;
            // 这里可以添加发送删除请求到后端的代码
            console.log(`尝试删除日记，ID: ${diaryId}`);
        });
    });
</script>
<script>
    // 模拟 API 请求
    async function fetchStatistics() {
        try {
            // 检查本地存储是否有缓存数据
            const cachedData = localStorage.getItem('statistics');
            if (cachedData) {
                const parsedData = JSON.parse(cachedData);
                document.querySelector('.text-secondary').textContent = parsedData.activeUsers;
                document.querySelector('.text-primary').textContent = parsedData.diaryCount;
            }

            const response = await fetch('your_api_url');
            const data = await response.json();

            // 更新页面数据
            document.querySelector('.text-secondary').textContent = data.activeUsers;
            document.querySelector('.text-primary').textContent = data.diaryCount;

            // 更新本地存储
            localStorage.setItem('statistics', JSON.stringify(data));
        } catch (error) {
            console.error('获取统计数据失败:', error);
        }
    }

    // 页面加载完成后调用
    window.addEventListener('load', fetchStatistics);
</script>
<script>
    </script>
        async function fetchStatistics() {
            try {
                const response = await fetch('http://127.0.0.1:5000/statistics');
                const data = await response.json();
                
                // 更新活跃用户数
                document.querySelector('.text-secondary').textContent = data.activeUsers;
                // 更新日记总数
                document.querySelector('.text-primary').textContent = data.diaryCount;
            } catch (error) {
                console.error('获取统计数据失败:', error);
            }
        }
    
        // 页面加载完成后调用
        window.addEventListener('load', fetchStatistics);
    </script>
</script>
<script>
    // 使用 fetch API 调用后端接口
    fetch('http://127.0.0.1:5000/api/example')
      .then(response => response.json())
      .then(data => {
            console.log(data);
            // 可以根据返回的数据更新页面内容
        })
      .catch(error => console.error('请求出错:', error));
</script>
</script>

</script>
</html>